<template>
  <!-- 自营品牌 -->
  <div class="grow flex">
      <div 
        class="grow_item flex"
        v-for="item in policyDescList"
        :key="item.icon"
      >
        <van-icon size="20" :name="item.icon" />
        <text>
          {{ item.desc }}
        </text>
      </div>
    </div>

    <!-- 导航区域 -->
    <div class="nav_list flex">
      <div 
        class="nav_list_item flex_c" 
        v-for="kingKong in kingKongList"
        :key="kingKong.picUrl"
      >
        <img :src="kingKong.picUrl">
        <text >
          {{ kingKong.text }}
        </text>
      </div>
    </div>

    <!-- 周年狂欢，一会可以图片做背景图，然后加轮播 -->
    <div class="promItem">
      <div 
      class="promItem_item1 flex"
      v-for="floor1 in bigPromotionFloorList"
      :key="floor1.taskId"
      >
        <div 
        class="promItem_item2 flex_c"
          v-for="floor2 in floor1.cells"
          :key="floor2.id"
        >
          <img :src="floor2.picUrl">
        </div>
      </div>
    </div>

    <!-- 新人专享礼 -->
    <div class="newPropos">
      <div class="text">—— 新人专享礼 ——</div>
      <div class="newcomersVip ">
        <div class="newcomers_left ">
          <div class="text">新人专享礼包</div>
          <img src="@/assets/lijilingqu.png" alt="">
        </div>
        <div class="newcomers_right ">
          <div 
            class="newcomers_right_item"
            v-for="(item, index) in indexActivityList"
            :key="index"
          >
            <div class="right_text">{{item.title}}</div>
            <div class="right_text_bottom">{{ item.subTitle || item.tag }}</div>
            <img :class="'right_text_img' + (index + 1)" :src="item.picUrl" alt="">
          </div>
        </div>
      </div>
    </div>

    <!-- 类目热销榜 -->
    <div class="moduleTitle">
      <div class="moduleTitle_text left">类目热销榜</div>
    </div>

    <!-- 严选直播 -->
    <div class="straightTV flex">
      <div 
        class="straightTV_left" 
      >
        <div class="straightTV_left_text">
          <div class="text_top ">趣出游</div>
          <div :class="['text_button', 'item1']">防晒上心</div>
        </div>
        <div class="flex">
          <div class="straightTV_img_left">
            <img src="../../images/dog.png" alt="">
          </div>
        </div>
      </div>
      <div 
        class="straightTV_right" 
      >
        <div class="text_top ">严选直播</div>
        <div :class="['text_button', 'item2']">种草攻略</div>
        <div class="flex">
          <div class="straightTV_img">
            <img src="../../images/yanxuan1.png" alt="">
          </div>
          <div class="straightTV_img">
            <img src="../../images/yanxuan2.png" alt="">
          </div>
        </div>
      </div>
    </div>

    <!-- 为你精选 -->
    <div class="favoriteListModule">
      <div class="favorite_title">为你精选</div>
      <!-- 商品列表 -->
      <CardList :list="homeStoreList.goodsList"></CardList>
    </div>

</template>

<script setup lang="ts">
import {ref, onMounted } from 'vue'
import CardList from '../../components/card-list/index.vue'
import homeStore from '@/store/home'
import type {
      homeModel, 
      kingKongListModel,
      policyDescListModel,
      floorListModel,
      indexActivityModuleModel,
      kingKongModuleModel,
      categoryListModel
} from '@/api/home'
import homeApi from '@/api/home'


const homeStoreList = homeStore()

// const homeAllData = ref<homeModel>()
// 标签页列表
const kingKongList = ref<kingKongListModel[]>()
// 网易自营品牌
const policyDescList = ref<policyDescListModel[]>()
// 周年庆活动
const bigPromotionFloorList = ref<floorListModel[]>()
// 新人专享礼
const indexActivityList = ref<indexActivityModuleModel[]>()
// 新人专享礼
const categoryHotSell = ref<categoryListModel[]>()
// 趣出游、严选直播
const sceneLightShoppingGuideList = ref<any>()
// 严选左侧文案
// const strictSelectionLeftText = ref<any>()

// 变量
const cardParams = {
    category3Id: "", // 三级分类
    categoryName: "", // 三级分类
    keyword: "", // 搜索
    trademark: "", // 品牌  "4:小米"   `品牌id:品牌名称`  `tmId:tmName`
    props: [], // 平台属性 ["1:1700-2799:价格"] [`平台属性id:平台属性值:平台属性名`]  [`attrId:attrValue:attrName`]
    order: "1:desc", // 排序   1 综合 2 价格     desc 降序 asc 升序   默认`1:desc`是`综合:降序`
    pageNo: 1, // 当前页
    pageSize: 3, // 每页条数
}

// 商品列表
const goodsList = ref<any>()

// 生命周期
onMounted (() => {
  homeStoreList.getGoodsList()
  getHomeData()
})
// 函数
const getHomeData = async () => {
  try {
    let result = await homeApi.getHomeData()
    // 网易自营品牌
    if(result.data.policyDescList) {
      policyDescList.value = result.data.policyDescList
    }
    // 获取标签页数据
    if(result.data.kingKongModule) {
      kingKongList.value = (result.data.kingKongModule as kingKongModuleModel).kingKongList
    }
    // 周年庆活动
    if(result.data.bigPromotionModule) {
      bigPromotionFloorList.value = result.data.bigPromotionModule.floorList
    }
    // 新人专享礼
    if(result.data.indexActivityModule) {
      indexActivityList.value = result.data.indexActivityModule
    }
    // 类目热销榜
    if(result.data.categoryHotSellModule) {
      categoryHotSell.value = result.data.categoryHotSellModule.categoryList
    }
    // 严选直播
    if(result.data.sceneLightShoppingGuideModule) {
      sceneLightShoppingGuideList.value = result.data.sceneLightShoppingGuideModule
      // 左侧文案 接口不稳定，弃用
      // strictSelectionLeftText.value = {
      //   title: result.data.sceneLightShoppingGuideModule[0].styleBanner.title,
      //   desc:  result.data.sceneLightShoppingGuideModule[0].styleBanner.desc,
      // }
    }
    

    
  } catch (error) {
    console.log(error);
    
  }
}

</script>

<style lang="less" scoped>
// 自营
.grow {
  flex-wrap: wrap;
  justify-content: space-around;
  .grow_item {
    text {
      font-size: 14px;
    }
  }
}

// 导航区域
.nav_list {
  flex-wrap: wrap;
  .nav_list_item{
    width: 20%;
    align-items: center;
    img {
      width: 55px;
      heightw: 55px;
    }
    text {
          font-size: 12px; 
    }
  }
}
// 周年庆
.promItem {
  width: 100%;
  .promItem_item1 {
    width: 100%;
    flex-wrap: wrap;
  justify-content: space-evenly;
    .promItem_item2 {
      // height: 1.98667rem;
      height: 2.7rem;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 新人专享礼
.newPropos {
  width: 100%;
  text-align: center;
  margin-top: 40px;
  .text {
    // display: inline-block;
    font-size: 20px;
  }
  .newcomersVip {
    width: 171px;
    height: 217px;
    background-color: rgb(249, 233, 207);
    .newcomers_left {
      padding: 20px 20px;
      .text {
        font-size: 15px;
        text-align: left;
        margin-bottom: 20px;
      }
      img {
        width: 129px;
        height: 129px;
      }
    }
    .newcomers_right {
      // display: inline-block;
      position: relative;
      top: -214px;
      left: 175px;
      .newcomers_right_item {
        width: 151px;
        height: 95px;
        margin-bottom: 5px;
        padding: 10px 0 0 15px;
        background-color: rgb(249, 233, 207);
        .right_text {
          text-align: left;
          font-size: 17px;
        }
        .right_text_bottom {
          font-size: 12px;
          text-align: left;
          color: #333;
        }
        img {
          width: 100px;
          height: 100px;
          position: relative;
          top: -30px;
          left: 30px;
        }
        .right_text_img2{
          left: 30px;
          width: 70px;
          height: 80px;
        }
      }
    }
  }
  
}

// 类目热销榜
.moduleTitle {
  margin-top: 40px;
  margin-bottom: 20px;
  .moduleTitle_text {
    font-size: 20px;
  }
}

.straightTV{
  .straightTV_left{
    width: 171px;
    height: 132px;
    margin-right: 5px;
    padding: 10px 0 0 10px;
    background-color: rgb(245, 245, 245);
    
    .text_top {
      font-size: 17px;
      text-align: center;
    }
    .text_button {
      font-size: 12px;
      text-align: center;
    }
    .item1 {
      color: red;
    }
    
    .straightTV_img_left {
      margin: 0 auto;
      img {
        width: 80px;
        height: 80px;
      }
    }
    .straightTV_img {
      width: 75px;
      height: 75px;
      margin-right: 3px;
      background-color: yellow;
    }
  }
  .straightTV_right {
    width: 171px;
    height: 132px;
    margin-right: 5px;
    padding: 10px 0 0 10px;
    background-color: rgb(245, 245, 245);
    .straightTV_img {
      width: 75px;
      height: 75px;
      margin-right: 3px;
    }
    .item2 {
      color: rgb(127, 127, 127);
    }
    .text_top {
      font-size: 17px;
    }
    .text_button {
      font-size: 12px;
    }
    .straightTV_img {
      img {
        width: 80px;
        height: 80px;
      }
    }
  }
}

// 为你精选
.favoriteListModule {
  margin-top: 10px;
  .favorite_title {
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 10px;
  }
}

.left {
  text-align: left;
}
</style>